import Base from "../base.js"
import theatersApi from "../../api/theaters.js";
import cinemasApi from "../../api/cinemas.js";
// import seatsApi from "../../api/seats.js"
export default class extends Base {
            data = {
            // 当前页
            curPage: 1,
            // 每页显示条数
            eachPage: 10,
            // 总条数
            total: 0,
            // 总页数
            maxPage: 0,
            // 用来描述学生的数据列表
            rows: [],
        }
        sel = {
            cinemas: [],
            theaters: []
        }

    
    // 渲染页面
    render() {
        this.$el.html(`
        <h1 style="text-align:center">放映厅列表</h1>
        <form class="layui-form" action="" >
        <div class="layui-form-item" style="margin-left:-28px">
            <label class="layui-form-label" style="width:100px">选择影院</label>
            <div class="layui-input-inline">
                <select name="cinemasId" lay-filter="search">
                </select>
            </div>
            <label class="layui-form-label" style="width:120px"></label>
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo5" style="margin-left:-30px">查看所有影厅</button>  
        </div>
        <form>
        <table id="demo" lay-filter="test">
        </table>
        <div id="test1">  <div class="layui-form-item">
      </div>
        `);
        this.formEle = layui.form;
        this.cinemas = $(`select[name=cinemasId]`);
        this.theatersEle = $(`select[name=theatersId]`);
        this.formEle.render();
        this.tableEle = layui.table;
        this.laypage = layui.laypage;
        this.tableEle.render({
            elem: '#demo'
            , cols: [[ //表头
                { field: '_id', title: 'ID', fixed: 'left' }
                , { field: 'name', title: '放映厅名称' }
                , {
                    field: 'status', title: '放映厅是否营业',
                    templet: (res) => {
                        const status = res.status ? "正在营业" : "暂停营业";
                        return status
                    }
                }
                , {
                    field: 'cinemasId', title: '放映厅从属的影院',
                    templet: (res) => {
                        const cinemaObj =this.sel.cinemas.filter(item=>item._id==res.cinemasId)[0];
                        const cinemasId = cinemaObj.name;
                        return cinemasId
                    }
                }
                , {
                    field: '_id',
                    title: '操作',
                    fixed: 'right',
                    templet: (res) => {
                        const { _id } = res
                        return `
                            <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon"></i>修改</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
                        `
                    }
                }

            ]]
        });
    }
    // 获取所有的放映厅
    async getTheatersAll() {
        const { curPage, eachPage } = this.data;
        this.data = await theatersApi.get({ curPage, eachPage })
        // 获取所有影院信息
        this.sel.cinemas = await cinemasApi.getData();
        this.rerender()
    }
    // 根据影院获取放映厅
    async getTheaters(cinemasId) {
        this.sel.theaters = await theatersApi.getMany(cinemasId);
        // console.log(this.sel.theaters);
        const options = _.map(this.sel.theaters, item => {
            return `<option value=${item._id}>${item.name}</option>`
        }).join("");
        // console.log(options);
        this.theatersEle.html(options)
        // this.data.theatersEle.theatersId = this.theatersEle.html(options).val()
        this.formEle.render()
    }
    // 获取查询的放映厅数据并渲染
    async getList(_id) {
        this.data.rows = [await theatersApi.getOne(_id)];
        console.log(this.data.rows);
        this.tableEle.reload('demo', {
            data: this.data.rows,
        });
    }
    // 删除放映厅并且删除对应的座位
    async del(_id) {
        await theatersApi.del(_id);
        // await seatsApi.del(_id)
        this.getTheatersAll();
    }
    // 编辑放映厅
    async edit(data) {
        const { _id, name, status } = data
        layer.open({
            type: 1,
            title: "修改放映厅",
            area: ["400px", "600px"],
            content: `<div>
            <h1  style="margin-left:120px;margin-bottom:20px;">修改放映厅</h1>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                <label class="layui-form-label" style="width:140px;">放映厅ID</label>
                <div class="layui-input-block">
                     <input disabled type="text" name="_id" lay-verify="title" autocomplete="off" value="${_id}" class="layui-input"  style="width:200px;">
                </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:140px;">放映厅名称</label>
                    <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="title" autocomplete="off" value="${name}" class="layui-input"  style="width:200px;">
                </div>
                </div>
        
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:140px;">放映厅营业状态</label>
                    <div class="layui-input-block">
                    <input type="radio" name="status" value=true  title="是">
                    <input type="radio" name="status" value=false title="否">
                </div>
              </div>
                <label class="layui-form-label" style="width:120px;"></label>
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" style="margin-left:40px">修改</button>  
            </div>
          </form>`,
        });
        this.form = layui.form;
        if (status) {
            $(`input[value=true]`).prop("checked", true)
        } else {
            $(`input[value=false]`).prop("checked", true)
        }
        this.form.on('submit(demo1)', (data) => {
            this.change(data.field)
            this.getTheatersAll();
            layer.close(layer.index);
            return false;
        });
        this.form.render();
        // this.getTheaters();
    }
    // 修改后台数据
    async change(data) {
        await theatersApi.change(data)
    }
    // 拿到值后再次渲染
    async rerender() {
        // 表格重载
        this.tableEle.reload('demo', {
            data: this.data.rows,
        });
        // console.log(this.sel.cinemas);
        // 根据所有的影院，渲染下拉列表
        const options = _.map(this.sel.cinemas, item => {
            return `<option value=${item._id}>${item.name}</option>`
        }).join("")
        this.cinemas.html(options)
        // console.log(this.cinemas.html());
        let obj= await theatersApi.searchTheater(this.cinemas.html(options).val());
        // console.log(obj);
        this.sel.theaters=obj;
        // console.log(this.sel.theaters);
        this.sel.cinemas.cinemasId = this.cinemas.html(options).val()
        // this.formEle.render()
        const form=layui.form;
        form.render();
        // 分页
        this.laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: this.data.total //数据总数，从服务端得到
            , limit: this.data.eachPage
            , curr: this.data.curPage
            , limits: [10, 20, 30, 40, 50]
            , layout: ['prev', 'page', 'next', 'count', 'limit', 'curr', 'limits']
            , jump: async (obj, first) => {
                //首次不执行
                if (!first) {
                    this.data.curPage = obj.curr;
                    this.data.eachPage = obj.limit;
                    const { curPage, eachPage } = this.data;
                    this.data = await theatersApi.get({ curPage, eachPage });
                    this.tableEle.reload('demo', {
                        data: this.data.rows,
                        limit: this.data.eachPage
                    });
                }
            }
        });
    }
    handle() {
        this.tableEle.on('tool(test)', async (obj) => {
            const _id = obj.data._id
            // 删除按钮
            if (obj.event === 'del') {
                layer.confirm('确定要删除吗?', (index) => {
                    this.del(_id)
                    layer.close(index);
                });
            }
            // 编辑按钮
            else if (obj.event === 'edit') {
                this.edit(obj.data)
            }
        });
        // 影院下拉列表的change事件
        this.formEle.on('select(search)', async (data) => {
            console.log(data.value);
            // let abc =await this.getTheaters(data.value);
            // console.log(abc);
        });
        // 点击查看所有放映厅
        this.formEle.on('submit(demo5)', (data) => {
            this.getTheatersAll()
            return false;
        });
    }
    async mounted() {
        await this.getTheatersAll();
        this.rerender();
    }

}